<template>
  <el-dialog v-model="dialogVisible" width="80%" title="查看核销码" append-to-body>
    <!-- 列表 -->
    <ContentWrap>
      <el-table
        ref="multipleTableRef"
        :data="list"
        style="width: 100%"
        highlight-current-row
        border
      >
        <el-table-column prop="productName" label="商品名称" align="center" />
        <el-table-column prop="merchantName" label="商家" align="center" />
        <el-table-column prop="verificationCode" label="核销码" align="center">
          <template #default="scoped">
            <el-popover placement="left" :width="226">
              <template #reference>
                <span class="cursor-pointer color-blue">查看</span>
              </template>
              <template #default>
                <Qrcode :text="scoped.row.verificationCode" />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="核销状态" align="center">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.WRITEOFF" :value="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column
          prop="verificationTime"
          label="核销时间"
          align="center"
          :formatter="dateFormatter"
        />
      </el-table>
    </ContentWrap>

    <template #footer>
      <el-button @click="submitForm" type="primary">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElTable } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import * as ActivityEnrollVerificateApi from '@/api/blind/activityEnrollVerificate'

const dialogVisible = ref(false) // 弹窗的是否展示

const list = ref([]) // 列表的数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 100,
  activityId: undefined
})

/** 打开弹窗 */
const open = async (id: number,userId: number) => {
  dialogVisible.value = true

  // 修改时，设置数据
  if (id > 0) {
    queryParams.activityId = id
	queryParams.userId = userId
    const data = await ActivityEnrollVerificateApi.getActivityEnrollVerificatePage(queryParams)
    list.value = data.list
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

// 提交
const submitForm = async () => {
  dialogVisible.value = false
}

// 取消
const cancel = () => {
  dialogVisible.value = false
}
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
